<template>

    <div class=" container" style="bottom: 0px; left: 0px; right: 0px; position: fixed;padding: 0;  margin-left:auto;margin-right:auto;">
        <div tabindex="0" class="mu-bottom-nav">
            <div class="mu-bottom-nav-shift-wrapper">
                <a tabindex="0" href="#/index/index" :class="a_item.home">
                    <div class="mu-bottom-item-wrapper">
                        <img :src="icon.home" alt="">
                        <span class="mu-bottom-item-text">主页</span>
                    </div></a>
                <a tabindex="0" href="#/good/index" :class="a_item.channel">
                    <div class="mu-bottom-item-wrapper">
                        <img :src="icon.channel" alt="">
                        <span class="mu-bottom-item-text">渠道</span>
                    </div></a>
                <a tabindex="0" href="#/purchase/index" :class="a_item.demand">
                    <div class="mu-bottom-item-wrapper">
                        <img :src="icon.demand" alt="">
                        <span class="mu-bottom-item-text">需求</span>
                    </div></a>
                <a tabindex="0" href="#/uc/index" :class="a_item.uc">
                    <div class="mu-bottom-item-wrapper">
                        <img :src="icon.uc" alt="">
                        <span class="mu-bottom-item-text">我的</span>
                    </div></a>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:["value"],
        name: 'Toolbar',
        data(){
            return {
                a_item:{
                    home:"mu-bottom-item",
                    channel:"mu-bottom-item",
                    demand:"mu-bottom-item",
                    uc:"mu-bottom-item",
                },
                icon:{
                    channel:require("@/img/icon/channel.png"),
                    demand:require("@/img/icon/demand.png"),
                    uc:require("@/img/icon/user.png"),
                    home:require("@/img/icon/index-o.png"),
                },
                display:true,
            };
        },
        methods:{
            active(value){
                for(let i in this.a_item){
                    if(value == i){
                        this.a_item[i] = "mu-bottom-item mu-bottom-item-active";
                    }else{
                        this.a_item[i] = "mu-bottom-item";
                    }
                }
            }
        },
        mounted(){
            this.active(this.value);
        }
    }
</script>

<style>
    .mu-bottom-nav img{
        width: 20px;
    }
</style>